<template>
  <div class="post_detail">
    <header>
      <BaseNavBar title="帖子详情" :is-nav="true" />
    </header>
    <main style="margin-top: 8px;">
      <Card>
        <section class="post">
          <section class="post_user">
            <img class="post_user_avatar" :src="post?.cover" v-if="post?.cover" />
            <span class="post_user_name">{{ post?.nickname }}</span>
          </section>
          <img class="post_img" :src="post?.cover" v-if="post?.cover" />
          <section class="post_title">{{ post?.title }}</section>
          <section class="post_tag">
            <van-tag plain type="primary" style="margin-left: 4px;" v-for="item in post?.tag?.split(',')" :key="item">{{
              item }}</van-tag>
          </section>
          <section class="post_brief">{{ post?.content }}</section>
          <section class="post_time">创建时间：{{ post?.createTime }}</section>
          <section class="post_time" v-if="post?.updateTime">更新时间：{{ post?.updateTime }}</section>
        </section>
      </Card>
    </main>
    <footer v-if="commentList?.length">
      <Card>
        <section class="comment">
          <p class="comment_title">共{{ commentList?.length }}条评论</p>
          <section class="comment_item" v-for=" item in commentList" :key="item?.id">
              <section class="comment_item_user">
                  <img :src="item?.avatar" class="comment_item_user_avatar">
                  <section>
                    <span class="comment_item_user_name van-ellipsis">&nbsp;&nbsp;{{ item?.nickname }}</span>
                    <p class="comment_item_user_name">&nbsp;&nbsp;评论时间：{{ item?.createTime }}</p>
                  </section>
              </section>
              <section class="comment_item_content">{{ item?.content }}</section>
              <section style="display: flex; justify-content: flex-end;" v-if="item?.userId === user?.id">
                <van-space>
                  <span  class="comment_item_action" style="color: #4A90E2;" @click="handleReply(item)">回复</span>
                  <span  class="comment_item_action" @click="handleDeleteComment(item)">删除</span>
                </van-space>
              </section>
              <section class="comment_item" v-for=" element in item?.reply" :key="element?.id">
              <section class="comment_item_user">
                  <img :src="element?.avatar" class="comment_item_user_avatar">
                  <section>
                    <span class="comment_item_user_name van-ellipsis">&nbsp;&nbsp;{{ element?.nickname }}</span>
                    <p class="comment_item_user_name">&nbsp;&nbsp;评论时间：{{ element?.createTime }}</p>
                  </section>
              </section>
              <section class="comment_item_content">回复 <span style="color: #4A90E2;">{{item?.nickname}}</span> : {{ element?.content }}</section>
              <section style="display: flex; justify-content: flex-end;" >
                <van-space>
                  <span  class="comment_item_action" @click="handleDeleteComment(element)">删除</span>
                </van-space>
              </section>
          </section>
          </section>
        </section>

      </Card>
    </footer>
    <section style="height: 100px;"></section>
    <van-action-bar>
      <van-action-bar-icon :size="20" style="color: #ff0000;" :icon="post?.liked ? 'good-job' : 'good-job-o'" text="点赞"
        :badge="post?.clickNum" />
      <van-action-bar-icon :size="20" style="color: #ffd700;" :icon="post?.collected ? 'like' : 'like-o'" text="收藏"
        :badge="post?.collectNum" />
      <van-action-bar-button type="danger" text="立即评论"  @click="handleComment"/>
    </van-action-bar>
    <van-dialog v-model:show="show" :title="commentType === 'comment' ? '评论帖子' : '回复帖子'" show-cancel-button @confirm="handleConfirm" @cancel="handleCancel">
      <van-form>
        <van-cell-group inset>
          <van-field v-model="formState.content" rows="3" autosize label="评论" type="textarea" placeholder="请输入您的评论" />
        </van-cell-group>
      </van-form>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from 'vue-router';
import { showToast,showConfirmDialog } from 'vant';
import Card from '@/components/Card/index.vue';
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import { getPostDetail } from '@/apis/post';
import { getCommentList, deleteComment,addComment } from '@/apis/comment'
import { getUserInfo } from '@/apis/user';

const route = useRoute();
const post = ref({});

const show = ref(false);

const commentList = ref([]);


const comment = ref({});


const user = ref({});

const formState = ref({
  content: ""
});

const commentType = ref('');

const init = async () => {
  const { data = {}, msg, code } = await getPostDetail(route.params?.id);
  if (code === 200) {

    post.value = data;
    return;
  }
  showToast(msg);
};

const infoInit = async () => {
  const { data = {}, code } = await getUserInfo();
  if (code === 200) {
    user.value = data;
  }
};
const commentListInit = async () => {
  const { data = {}, code } = await getCommentList(route.params?.id);
  if (code === 200) {
    commentList.value = data?.list || [];
  }
};


const handleConfirm = async () => {

  const data1 = {
    postId: route.params?.id,
    content: formState.value.content,
  };
  const data2 = {
    postId: route.params?.id,
    content: formState.value.content,
    pid: comment.value.id,
  };

  const data = commentType.value === 'comment' ? data1 : data2;
  try {
    const res = await addComment(data)
    if(res?.code === 200){
      showToast('评论成功');
      commentListInit();
      formState.value = {};
      show.value = false;
    }
  } catch (error) {
    console.log(error,'comment-error');

  }
};

const handleDeleteComment = (item) => {
  showConfirmDialog({
    title: '提示',
    message: '确定删除该评论吗？',
  }).then(async()=>{

    try {
      const res = await deleteComment(item?.id);
      if(res?.code === 200){
        showToast('删除成功');
        commentListInit();
      }
    } catch (error) {
      console.log(error,'delete-error');

    }

  }).catch(()=>{})
};



const handleReply = ( item ) => {
  show.value = true;
  commentType.value = 'reply';
  comment.value = item;

};


const handleComment = () => {
  show.value = true;
  commentType.value = 'comment';
};

const handleCancel = () => {
  show.value = false;
  formState.value = {};
};

onMounted(() => {
  init();
  commentListInit();
  infoInit();
})
</script>

<style lang="less" scoped>
.post {
  box-sizing: border-box;
  padding: 8px;

  &_img {
    width: 100%;
    height: 320px;
  }

  &_title {
    font-size: 16px;
    color: #000;
  }

  &_brief {
    font-size: 12px;
    color: #999;
  }

  &_condition {
    font-size: 14px;
    color: #666;
  }

  &_time {
    font-size: 12px;
    color: #999;
  }

  &_user {
    height: 60px;
    box-sizing: border-box;
    padding: 0 8px;
    display: flex;
    align-items: center;

    &_avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
    }

    &_name {
      font-size: 12px;
      color: #333;
      margin-left: 8px;
    }

  }

  &_tag {
    height: 18px;
    padding: 8px 0px;
    display: flex;
    flex-wrap: wrap;
  }
}

.comment {
  box-sizing: border-box;
  padding: 8px;
  &_title {
    font-size: 14px;
    color: #333;
  }
  &_item{
    margin-top: 8px;
    box-sizing: border-box;
    padding: 4px;
      &_user{
        height: 48px;
        display: flex;
        align-items: center;
        &_avatar{
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }
        &_name{
          font-size: 12px;
          color: #666;
        }
      }
      &_content{
        margin-top: 8px;
        font-size: 12px;
        color: #999;
      }
      &_action{
        color: #f50;
        font-size: 12px;
      }
  }
}
</style>
